<template>
  <div class="register_bg">
      <!--标题-->
    <p class="title">注册集商网账号</p>
    <!--内容白色框-->
    <div class="message_box">
      <input type="text" class="input_box" placeholder="请输入手机号" v-model="phonenumber" style="border-top: none;">
      <div class="validate_code_box top_line">
        <!--左边输入框-->
        <input type="text" class="validate_code" placeholder="请输入验证码" v-model="authcode">
        <!--右边发送按钮-->
        <Captcha type="register" :phonenumber="phonenumber" class="get_code"></Captcha>
      </div>
      <input type="password" class="input_box" placeholder="请输入密码" v-model="password">
      <input type="password" class="input_box" placeholder="请再次输入密码" v-model="rePassword">
      <input type="text" class="input_box" placeholder="请输入姓名" v-model="username">
      <input type="text" class="input_box" placeholder="请输入常用邮箱" v-model="email">
    </div>
    <!--协议文字-->
    <p class="agreement">
      <span class="font_dis">注册账号即表示同意并遵守</span>
      <span class="font_rule">《集商用户协议》</span>
    </p>

    <div class="button" @tap="fast_register">
      <p class="font">快速注册</p>
    </div>

  </div>
</template>

<script>

  import Captcha from '@/components/common/Captcha'
  import { regPhone,regPasswd,regEmail,getToken } from "../../config/utils"
  import API from  '../../config/api'

    export default {
      name: "Register",
      components: {Captcha},
      data: function () {
        return {

          phonenumber: '',
          authcode: '',
          username: '',
          password: '',
          rePassword: '',
          email:'',
          token: ''
        }
      },
      mounted: function () {
        getToken().then((res) => {
          this.token = res;
        });
      },
      methods:{
        reg: function () {
          if(!this.phonenumber || !this.email || !this.password || !this.rePassword || !this.authcode || !this.username)
          {
            this.$msg('请将注册信息填写完整');
            return false;
          }
          if (!regPhone(this.phonenumber)) {
            this.$msg('请输入正确的手机号码');
            return false;
          }
          if(!regEmail(this.email)){
            this.$msg('请输入正确的邮箱');
            return false;
          }
          if (!regPasswd(this.password)) {
            this.$msg('请输入密码');
            return false;
          }
          if (!regPasswd(this.password)) {
            this.$msg('请输入用户名');
            return false;
          }
          if (!this.authcode) {
            this.$msg('请输入验证码');
            return false;
          }
          if (this.password != this.rePassword) {
            this.$msg('两次密码不一致');
            return false;
          }
          return true;
        },
        fast_register:function () {
          //数据校验
          if (!this.reg()) {
            return;
          }
          // 请求地址和参数
          var url = API.register;
          var params = {
            token: this.token,
            password: this.password,
            phonenumber: this.phonenumber,
            email: this.email,
            authcode: this.authcode,
            username: this.username
          };
          //请求接口
          this.$axios.post(url, params).then((res) => {
            if (res.code == 1) {
              this.$msg('注册成功');
              this.$router.push('/login')
            } else if (res.code == 4) {
              this.$msg('验证码错误');
            } else if (res.code == 422) {
              this.$msg('您长时间未操作，请重新刷新浏览器后重试');
            }
            else{
              this.$msg(res.message);
            }
          })

        }

      }
    }
</script>

<style scoped>

  ::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 0.26rem;
    color: #666666;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 0.26rem;
    color: #666666;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 0.26rem;
    color: #666666;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size: 0.26rem;
    color: #666666;
  }

  .register_bg p{
    margin: 0;
    padding: 0;
  }

  .register_bg{
    background: url('../../../static/img/register_bg.jpg');
    background-size: cover;
    height:  100%;
    padding-bottom: 1.5rem;
  }

  .register_bg .title{
    font-size: 0.4rem;
    color: #FFFFFF;
    font-weight: 600;
    text-align: center;
    padding-top: 1.5rem;
  }

  .register_bg .message_box{
    width: 7rem;
    margin: auto;
    height: 6.35rem;
    margin-top: 0.8rem;
    background: #FFFFFF;
    padding: 0 0.2rem;
  }

  .register_bg .message_box .top_line{
    border-top:solid 1px #d9d9d9;
  }

  .register_bg .message_box .input_box{
    outline: none;
    border-bottom: none;
    border-left:none;
    border-right:none;
    height: 1.05rem;
    margin: 0;
    padding: 0 0.15rem;
    border-radius: 0;
  }

  .register_bg .message_box .validate_code_box{
    position: relative;
    outline: none;
    border-left:none;
    border-right:none;
    border-bottom: none;
    height: 1.05rem;
    margin: 0;
    padding: 0 0.15rem;
    border-radius: 0;
  }

  .register_bg .message_box .validate_code_box .get_code{
    position: absolute;
    right: 0;
    top:0.12rem;
    border-radius: 5px;
    background: #00baf8;
    line-height: 0.8rem;
    color: white;
    font-size: 0.26rem;
    padding:0 0.5rem;
  }

  .register_bg .message_box .validate_code_box .validate_code{
    width: 4.5rem;
    border: none;
    margin: 0;
    padding: 0;
    height: calc(1.05rem - 2px);
  }

  .register_bg .agreement{
    text-align: center;
    margin-top: 0.4rem;
  }

  .register_bg .agreement .font_rule{
    color: #00bcff;
    font-size: 0.24rem;
  }

  .register_bg .agreement .font_dis{
    color: #f8f8f8;
    font-size: 0.24rem;
  }

  .register_bg .button{
    width: 7rem;
    height: 0.8rem;
    border-radius:5px;
    background: #00baf8;
    margin: auto;
    margin-top: 0.4rem;
    cursor: pointer;
  }

  .register_bg .button .font{
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: white;
  }


</style>
